<!--
 * @Author: your name
 * @Date: 2020-10-08 17:08:27
 * @LastEditTime: 2021-03-09 10:57:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\Home.vue
-->
<template>
  <div class="user-main-big-box">
    <div class="search-box">
      <div class="search-box-sub">
        <span class="lable-text">{{$t('user.loginName')}}</span>
        <el-input
        :placeholder="$t('common.info.pl-insert-content')"
        v-model="loginName"
        clearable 
        style="width:160px;"
        >
        </el-input>
      </div>
      <div class="search-box-sub">
        <span class="lable-text">{{$t('email')}}</span>
        <el-input
                :placeholder="$t('common.info.pl-insert-content')"
        v-model="email"
        clearable 
        style="width:160px;"
        >
        </el-input>
      </div>
      <div class="search-box-sub">
        <span class="lable-text">{{$t('vsite.userType')}}</span>
        <el-select v-model="userType" filterable :placeholder="$t('common.info.pl-insert-content')" clearable>
          <el-option
            v-for="item in dictionary.USER_TYPE"
            :key="item.sid"
            :label="item.code"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search-box-sub">
        <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
      </div>
    </div>
    <div class="button-box">
      <el-button type="primary" icon='el-icon-edit' @click='showAddModal' style="margin-right:10px;">{{$t('add')}}</el-button>
      <el-popconfirm
              :confirm-button-text='$t("sure")'
              :cancel-button-text='$t("cancel")'
        :title="$t('promotionManagement.allDelete')"
        @confirm='batchDelect()'
      >
        <el-button type="danger" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
      </el-popconfirm>
    </div>
      <baseTable v-loading="loading"  row-key='sid' :data="data" border  stripe @selection-change="handleSelectionChange($event)" @change='change($event)' :column='column' :select='true'>
        <template #userType="{data}">
          {{returnUserTypeCode(data.userType)}}
        </template>
        <template #enableFlag="{data}">
          {{returnIsUseCode(data.enableFlag)}}
        </template>
        <template #option="{data}">
          <div class="option-box">
            <el-button v-if='data.userType != 5' size='small' type="primary" icon="el-icon-edit" @click='editUsers(data)' style="margin-right:10px;"></el-button>
            <el-button v-if='data.userType == 5' size='small' type="primary" icon="el-icon-tickets" @click='editUsersDetail(data)' style="margin-right:10px;"></el-button>
            <el-popconfirm
                    :confirm-button-text='$t("sure")'
                    :cancel-button-text='$t("cancel")'
              :title="$t('index.delete_item_confirm')"
              @confirm='deleteUsers(data.ids)'
            >
              <el-button type="danger" slot="reference" icon='el-icon-delete' ></el-button>
            </el-popconfirm>
          </div>
        </template>
      </baseTable>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <el-dialog
          :title="$t('user.userAdd.title')"
          :visible.sync="dialogVisible"
          width="60%"
          style="min-width:1100px;"
          :close-on-click-modal='false'
          >
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="200px" style="width:100%;">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.loginName')" prop="loginName">
                  <el-input v-model="ruleForm.loginName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('device.inverter.nation')" prop="country">
                 <el-select v-model="ruleForm.country" filterable :placeholder="$t('index.selectStates')" clearable @change='countryChange()'>
                    <el-option
                      v-for="item in selectCountryData"
                      :key="item.code"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.userType')" prop="userType">
                  <el-select v-model="ruleForm.userType" filterable :placeholder="$t('index.selectStates')" clearable @change='userTypeChange()'>
                    <el-option
                      v-for="item in UserTypeData"
                      :key="item.sid"
                      :label="item.code"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('province')" prop="province">
                  <el-select v-if='isChina' v-model="ruleForm.province" @change='addChangeProvince()' filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in selectNextAreaByNameP"
                      :key="item.sid"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                  <el-input v-else v-model="ruleForm.province"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.firmName')" prop="relId">
                  <el-select v-model="ruleForm.relId" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in businessDataList"
                      :key="item.sid"
                      :label="item.firmName"
                      :value="item.sid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('city')" prop="city">
                  <el-select v-if='isChina' v-model="ruleForm.city" autoComplete="off" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in selectNextAreaByNameC"
                      :key="item.sid"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                  <el-input v-else v-model="ruleForm.city" autoComplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('password')" prop="password">
                  <el-input v-model="ruleForm.password" show-password autoComplete="new-password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('email')" prop="email">
                  <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.updatePassword.conPwd')" prop="passwordR">
                  <el-input v-model="ruleForm.passwordR" show-password></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('telphone')" prop="phone">
                  <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.userAdd.roleId')" prop="roleId">
                  <el-select v-model="ruleForm.roleId" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in RoleListData"
                      :key="item.sid"
                      :label="item.roleName"
                      :value="item.sid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('address')" prop="address">
                  <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">{{$t('sure')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
          :title="$t('user.userEidt.title')"
          :visible.sync="editDialogVisible"
          width="60%"
          style="min-width:1100px;"
          :close-on-click-modal='false'
          >
          <el-form ref="editRuleForm" :model="editRuleForm" :rules="rules" label-width="200px" style="width:100%;">
            <el-row>
              <el-col :span="12">
                <!-- <el-form-item label="登录账号" prop="loginName">
                  <el-input v-model="ruleForm.loginName"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('warranty.emailCode')" prop="email">
                  <el-input v-model="editRuleForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('device.inverter.nation')" prop="country">
                 <el-select v-model="editRuleForm.country" filterable :placeholder="$t('index.selectStates')" clearable @change='countryChangeEdit()'>
                    <el-option
                      v-for="item in selectCountryData"
                      :key="item.code"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <!-- <el-form-item label="用户类型" prop="userType">
                  <el-select v-model="ruleForm.userType" filterable placeholder="请选择" clearable @change='userTypeChange()'>
                    <el-option
                      v-for="item in UserTypeData"
                      :key="item.sid"
                      :label="item.code"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('telphone')" prop="phone">
                  <el-input v-model="editRuleForm.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('province')" prop="province">
                  <el-select v-if='isChina' v-model="editRuleForm.province" @change='changeProvince()' filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in selectNextAreaByNameP"
                      :key="item.sid"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                  <el-input v-else v-model="editRuleForm.province"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <!-- <el-form-item label="用户单位" prop="relId">
                  <el-select v-model="ruleForm.relId" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in businessDataList"
                      :key="item.sid"
                      :label="item.firmName"
                      :value="item.sid">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('address')" prop="address">
                  <el-input v-model="editRuleForm.address"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('city')" prop="city">
                  <el-select v-if='isChina' v-model="editRuleForm.city" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in selectNextAreaByNameC"
                      :key="item.sid"
                      :label="item.enName"
                      :value="item.enName">
                    </el-option>
                  </el-select>
                  <el-input v-else v-model="ruleForm.city"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('user.userAdd.roleId')" prop="roleId">
                  <el-select v-model="editRuleForm.roleId" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                      v-for="item in RoleListDataEdit"
                      :key="item.sid"
                      :label="item.roleName"
                      :value="item.sid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitFormEdit('editRuleForm')">{{$t('sure')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
          :title="$t('user.userDetails')"
          :visible.sync="editDialogVisibleUser"
          width="60%"
          style="min-width:1100px;"
          :close-on-click-modal='false'
          >
          <!-- editUsersDetailData.userType -->
            <div class="detail-content-modal">
                <div class="row-box"> <span>{{$t('user.loginName')}}</span> <span>{{editUsersDetailData.loginName}}</span></div>
                <div class="row-box"> <span>{{$t('vsite.userType')}}</span> <span>{{comm.returnCode(dictionary.USER_TYPE,editUsersDetailData.userType,'value','code')}}</span></div>
                <div class="row-box"> <span>{{$t('warranty.yourName')}}</span> <span>{{editUsersDetailData.userName}}</span></div>
                <div class="row-box"> <span>{{$t('telphone')}}</span> <span>{{editUsersDetailData.phone}}</span></div>
                <div class="row-box"> <span>{{$t('warrantyStatistics.address')}}</span> <span>{{editUsersDetailData.address}}</span></div>
                <div class="row-box"> <span>{{$t('warrantyManage.mailbox')}}</span> <span>{{editUsersDetailData.email}}</span></div>
                <div class="row-box"> <span>{{$t('warrantyStatistics.nation')}}</span> <span>{{editUsersDetailData.country}}</span></div>
                <div class="row-box"> <span>{{$t('province')}}</span> <span>{{editUsersDetailData.province || ''}}</span></div>
                <div class="row-box"> <span>{{$t('city')}}</span> <span>{{editUsersDetailData.city || ''}}</span></div>
                <div class="row-box"> <span><el-checkbox v-model="editUsersDetailData.visiable" :disabled="true"></el-checkbox></span> <span style="border-bottom:none;">{{$t('login.isSure2')}}</span></div>

            </div>
        </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'　　　
import baseTable from '../../components/common/baseTable'
import { log } from 'util';
export default {
  components: {
    baseTable,
  },
  data() {
    return {
      current:1,
      total:1,
      size:10,
      loginName:'',
      email:'',
      userType:'',
      dictionary:{},
      selectData:[],
      RoleListDataEdit:[],
      loading:false,
      dialogVisible:false,
      editDialogVisible:false,
      editDialogVisibleUser:false,
      ruleForm: {
          systemFlag: 0,
          loginName: '',
          userType: '',
          relId: '',
          password: '',
          roleId: '',
          country: '',
          province: '',
          city: '',
          email: '',
          phone: '',
          address: ''
      },
      editRuleForm: {
          systemFlag: 0,
          roleId: '',
          country: '',
          province: '',
          city: '',
          email: '',
          phone: '',
          address: ''
      },
      rules: {
          loginName: [
            { required: true, message: this.$t('login.pointUserName'), trigger: 'blur' },
          ],
          country: [
            { required: true, message: this.$t('msg_choose_country') , trigger: 'change' }
          ],
          userType: [
            {required: true, message: this.$t('login.alertError') , trigger: 'change' }
          ],
          province: [
            {required: false, message: this.$t('msg_choose_province'), trigger: 'change' }
          ],
          relId: [
            {required: true, message: this.$t('user.msg_none_firm'),  trigger: 'change' }
          ],
          city: [
            { required: true, message: this.$t('msg_choose_city'), trigger: 'change' }
          ],
          password: [
            { required: true, message: this.$t('login.pointPwd'), trigger: 'blur' }
          ],
          city: [
            { required: false, message: this.$t('common.info.pl-insert-city'), trigger: 'blur' }
          ],
          email: [
            { required: true, message: this.$t('common.info.pl-insert-email'), trigger: 'blur' },
            { type: 'email', message: this.$t('user.msg_reg_email'), trigger: ['blur', 'change'] }
          ],
          passwordR: [
            { required: true, message: this.$t('common.info.pl-insert-sure-pwd') , trigger: 'blur' }
          ],
          phone: [
            { required: false, message: this.$t('common.info.pl-insert-phone') , trigger: 'blur' }
          ],
          roleId: [
            { required: true, message: this.$t('common.info.pl-insert-role'), trigger: 'change' }
          ],
          address: [
            { required: false, message: this.$t('login.js_sign_address'), trigger: 'blur' }
          ],
        },
      column: [{
        title: this.$t('user.loginName'),
        value: 'loginName',
      },
      {
        title: this.$t('user.userType'),
        value: 'userType',
        slot: 'userType'
      },
      {
        title: this.$t('email'),
        value: 'email'
      },
      {
        title: this.$t('user.enableFlag'),
        value: 'enableFlag',
        slot: 'enableFlag'
      },
      {
        title: this.$t('telphone'),
        value: 'phone',
        // sortable:'true'
      },
      {
        title: this.$t('control'),
        slot: 'option'
      }],
      data:[],
      selectCountryData:[],
      UserTypeData:[],
      isChina:true,
      RoleListData:[],
      businessDataList:[],
      userGetByIdData:[],
      selectNextAreaByNameP:[],
      selectNextAreaByNameC:[],
      editUsersDetailData:{}
    }
  },
  mounted() {
    this.selectUserType()
    this.selectNextAreaByName()
    
    this.selectCountry()
    
    this.getDictionaryBatch()
  },
  methods: {
    editUsersDetail(data){
      this.editDialogVisibleUser = true
      this.editUsersDetailData = data
    },
    editUsers(data){
      this.userGetById(data.ids)
      this.editDialogVisible = true
    },
    async userGetById(id){
      let res = await this.API.userGetById({
        id:id
      })
      this.userGetByIdData = res || {}
      let objKeys = Object.keys(this.editRuleForm)
      for (let i = 0; i < objKeys.length; i++) {
        this.editRuleForm[objKeys[i]] = this.userGetByIdData[objKeys[i]]
      }
      this.editRuleForm.roleId = this.userGetByIdData.userType+''
      this.editRuleForm.ids = this.userGetByIdData.ids
      this.getRoleListEdit()
      if(this.editRuleForm.country != '中国'){
        this.isChina = false
      }else{
        this.isChina = true
        this.changeProvince(true)
      }
    },
    async selectBusiness(){
      let res = await this.API.selectBusiness({
        userType:this.ruleForm.userType
      })
      this.businessDataList = res
    },
    userTypeChange(){
      this.getRoleList()
      this.selectBusiness()
    },
    async getRoleList(){
      let res = await this.API.getRoleList({
        userTypeToJsp:this.ruleForm.userType,
        lang:localStorage.getItem('userId')
      })
      this.RoleListData = res
    },
    async getRoleListEdit(){
      let res = await this.API.getRoleList({
        userTypeToJsp:this.editRuleForm.roleId,
        lang:localStorage.getItem('userId')
      })
      this.RoleListDataEdit = res
    },
    async selectUserType(){
      let res = await this.API.selectUserType({
        userId:localStorage.getItem('userId')
      })
      let UserTypeData = res || []
      this.UserTypeData = []
      this.ruleForm.userType = res[0].value
      UserTypeData.forEach(item =>{
        if(item.value != '5'){
          this.UserTypeData.push(item)
        }
      })
      this.getRoleList()
      this.selectBusiness()
    },
    countryChange(){
      console.log(1233);
      if(this.ruleForm.country != '中国'){
        this.rules.email[0].required = true
        this.isChina = false
      }else{
        this.rules.email[0].required = true
        this.isChina = true
      }
      this.ruleForm.province = ''
      this.ruleForm.city = ''
    },
    countryChangeEdit(){
      if(this.editRuleForm.country != '中国'){
        this.rules.email[0].required = true
        this.isChina = false
      }else{
        this.rules.email[0].required = true
        this.isChina = true
      }
      this.editRuleForm.province = ''
      this.editRuleForm.city = ''
    },
    async selectCountry(){
      let res = await this.API.selectCountry()
      this.selectCountryData = res || []
      this.getUserPage()
    },
    async submitForm(formName) {
      console.log(formName,'formName')
        this.$refs[formName].validate((valid) => {
          console.log(valid,'valid')
          if (valid) {
            // alert('submit!');
            this.addEntity()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async submitFormEdit(formName){
        console.log(formName);
        this.$refs[formName].validate((valid) => {
          console.log(valid,'valid')
          if (valid) {
            // alert('submit!');
            this.editEntity()
          } else {
            return false;
          }
        });
      },
      async editEntity(){
        let res = await this.API.editEntity(Object.assign({},this.editRuleForm,{roleIds:this.editRuleForm.roleId}))
        if(res.success){
        this.$message({
          message: this.$t('index.control_success'),
          type: 'success'
        });
        this.editDialogVisible = false
        this.query()
      }else{
        this.$message({
          message: this.$t('index.control_fail'),
          type: 'warning'
        });
      }
      },
      async selectNextAreaByName(){
        let res = await this.API.selectNextAreaByName({
          name:encodeURI('中国'),
          areaLevel:'2'
        })
        this.selectNextAreaByNameP = res || []
      },
      async changeProvince(flag){
        let res = await this.API.selectNextAreaByName({
          name:encodeURI(this.editRuleForm.province),
          areaLevel:'3'
        })
        if(!flag){
          this.editRuleForm.city = ''
        }
        this.selectNextAreaByNameC = res || []
      },
      async addChangeProvince(flag){
        let res = await this.API.selectNextAreaByName({
          name:encodeURI(this.ruleForm.province),
          areaLevel:'3'
        })
        if(!flag){
          this.ruleForm.city = ''
        }
        this.selectNextAreaByNameC = res || []
      },
      async addEntity(){
        this.ruleForm.password = md5(this.ruleForm.password)
        delete this.ruleForm.passwordR
        let res = await this.API.addEntity(Object.assign({},this.ruleForm,{roleIds:this.ruleForm.roleId}))
        if(res.success){
        this.$message({
          message: this.$t('index.control_success'),
          type: 'success'
        });
        this.dialogVisible = false
        this.query()
      }else{
        this.$message({
          message: this.$t('index.control_fail'),
          type: 'warning'
        });
      }
      },
    showAddModal(){
      this.dialogVisible = true
    },
    async deleteUsers(id){
      let res = await this.API.delUserBatch({
        ids:id
      })
      if(res.success){
        this.$message({
          message: this.$t('index.control_success'),
          type: 'success'
        });
        this.query()
      }else{
        this.$message({
          message: this.$t('index.control_fail'),
          type: 'warning'
        });
      }
    },
    async batchDelect(){
      let res = await this.API.delUserBatch({
        ids:this.selectData.map(item =>{
          return item.ids
        })
      })
      if(res.success){
        this.$message({
          message: this.$t('index.control_success'),
          type: 'success'
        });
        this.query()
      }else{
        this.$message({
          message: this.$t('index.control_fail'),
          type: 'warning'
        });
      }
    },
    returnUserTypeCode(val){
      let code = ''
      this.dictionary.USER_TYPE.forEach(item=>{
        if(val == item.value){
          code = item.code
        }
      })
      return code
    },
    returnIsUseCode(val){
      let code = ''
      this.dictionary.isUse.forEach(item=>{
        if(val == item.value){
          code = item.code
        }
      })
      return code
    },
    async getDictionaryBatch(){
      let res = await this.API.getDictionaryBatch({
        dictCodes:'isUse,USER_TYPE',
        lang:localStorage.getItem('lang')||'zh_CN'
      })
      this.dictionary = res || {}
    },
    query(){
      this.current = 1
      this.getUserPage()
    },
    async getUserPage(){
      this.loading = true
      let res = await this.API.getUserPage({
        size: this.size,
        current: this.current,
        loginName:this.loginName,
        email:this.email,
        userType:this.userType
      })
      this.data = res.rows || []
      this.total = res.total || 0
      this.loading = false
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    },
     handleSelectionChange (val) {
       this.selectData = val
    },
    change (val) {
    },
    handleSizeChange(val) {
      this.size = val
      this.current = 1
      this.getUserPage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getUserPage()
    }
  },
}
</script>
<style lang="less" scoped>
.user-main-big-box{
  font-size: 14px;
  .search-box{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .search-box-sub{
      display: flex;
      align-items: center;
      margin-right: 10px;
      .lable-text{
        margin-right:8px; 
      }
    }
  }
  .button-box{
    display: flex;
    margin-bottom: 10px;
  }
  .detail-content-modal{
    padding: 0px 15%;
    .row-box{
      display: flex;
      margin-bottom:10px;
      span:nth-child(1){
        // color: red;
        flex: 3;
        text-align: right;
        padding-right: 15px;
      }
      span:nth-child(2){
        // color: red;
        flex: 7;
        border-bottom:1px dashed #ccc;
      }
    }
    
  }
}
</style>
